Vue.component("me-tree", {
    props: {
        deep: {
            type: Number,
            default: 0
        },
        list: {//列表内容
            type: Object,
            default: () => ({})
        },
        labelw: {//列表内容
            type: Array,
            default: () => ([])
        },
		editl:{
			type: Array,
			default: () => ([])
		},
        pagec: {//列表内容
            type: Function
        },
        treeitem: {//列表内容
            type: Function
        },
    },
    data() {
        return {
            loads: {
                type: false,
                index: 0
            },
            open: {
				
			}
        }
    },
    mounted() {
        console.log(this.list,888)
    },
    template: `
        <div>
            <div class='treeitem'  :class="classObject(deep)" v-for="(item,index) in list.list" :key="index">
               <div :style="{transform:'translateX(-'+(deep+1)*20+'px)',  width: 'calc(100% + '+(deep+1)*20 +'px)'}" class='lines'></div>
                <div class='flex flex-ac flex-jc-sa rowitem'> 
                    <div class='flex1 title-ti flex flex-ac'  @click.stop='treeitem({item,list,loads,index,open,deep})'  style='padding-left:0' >
                        <i class='icons-down' v-if='item.list || item.customers > 0' :class='{loading:loads.type && loads.index == index ,iconsright:open[index] || item.top}' ></i> 
						<div >{{item[labelw[0].prop] || '-'}}</div> 
                    </div>
					<div v-if='labelw.length>1'  class='title-ti'  v-for="(tt,tin) in [...labelw.slice(1)]" :key="tin">
						<div >{{item[tt.prop] || '-'}}</div> 
					</div>
					<div v-if='editl.length>=1'  class='title-ti'>
						<el-button style='padding:0' type="text" @click="tt.click(item)" size="mini" :icon="tt.icon || 'el-icon-edit'" v-for="(tt,tin) in editl" :key="tin">{{tt.name}}</el-button>
					</div>
                </div>
                <me-tree :row-key='item[list.rowKey]' :pagec='pagec' :editl='editl' :labelw='labelw' v-if='open[index]' :treeitem='treeitem' :list='item' :deep='(deep+1)'></me-tree>
            </div>
            <div  v-if='list.total && list.total>1'>
               <div :style="{transform:'translateX(-'+(deep)*20+'px)',  width: 'calc(100% + '+20 +'px)'}" class='lines'></div>
                <el-pagination 
                    small
					:hide-on-single-page="true"
                    @current-change='(p)=>(pagec({p,list}))'
                    :page-size='10' 
					 @size-change="(ps)=>(pagec({p:1,list,ps}))"
					:page-sizes="[10, 20,30, 50, 100]"
                    layout="sizes,prev, pager, next" 
                    :total="Number(list.total)">
                </el-pagination>
            </div>
        </div>
    `,
    methods: {

        classObject: function (deep) {
            if (deep > 5) deep = 5
            return {
                ["temp-lv" + deep]: true,
            }
        }
    }

});


Vue.component("box-tree", {
    props: {
        deep: {
            type: Number,
            default: -1
        },
        proplist: {//列表内容
            type: Object,
            default: () => ({})
        },
		editl:{
			type: Array,
			default: () => ([])
		},
        pagec: {//列表内容
            type: Function
        },
        treeitem: {//列表内容
            type: Function
        },
		ld:{
            type: Boolean,
            default: false
        },
    },
    mounted() {
        // console.log(this.editl, "box-tree")
    },

    template: `
        <div>
            <div class='title' >
                <div class='flex flex-ac flex-jc-sb' >
					<div class='title-ti' :class="{'flex1':i==0}"  v-for='(v,i) in proplist.labelw' :key='i' >{{v.label}}</div>
					<div class='title-ti'  v-if="editl"  >操作</div>
                </div>
            </div>
            <me-tree :pagec='pagec' v-loading='ld' :treeitem='treeitem' :editl='editl' :labelw='proplist.labelw' :list='proplist.col' :deep='(deep+1)'></me-tree>
        </div>
    `,
    methods: {
		
    }
});
function postData(url, data) {
    return new Promise((resFn,fejFn) => {
        $.ajax({
            type: 'post',
            url: url,
            data: data,
            dataType: 'json',
            success: function (res) {
                resFn(res)
            },
			error:function(){
					fejFn()
			}
        })
    })
} 